﻿<html>
<head>
<title>集约化网站群站点功能批量检测工具</title>
</head>
<body>
<script src="jquery.min.js"></script>
<style>
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,menu,table,tbody,tfoot,thead,th,tr,td,video,tt,u,ul,var{background:transparent;font-size:100%;margin:0;padding:0;border:0;outline:0;}
body{color:#222;font-size:14px;line-height:1.42857143;font-family:"Microsoft YaHei"; text-align:center;}
a{color:#222;text-decoration:none;}
a:hover{color:red;}
li,ol,ul{list-style: none;vertical-align: middle;}
input,textarea{ border:1px solid #aaa; padding:6px; border-radius:4px; font-size:14px; font-family:"Microsoft YaHei"; text-align:center; vertical-align: middle;}
input:focus,select:focus,textarea:focus{background:#f8f6f1; border-color:#d9c086; }
button{ padding:7px 15px;border-radius:4px; border:none; background-color:#27c; color:#fff; cursor:pointer;}
button:focus{ background-color:#369;}
h1{ font-size:24px;}
h2{ font-size:18px;}
h3{ font-size:16px;}

/* 侧栏 */
.side{ position: fixed; top:0; left:0; float: left;padding: 0 15px; width: 220px;height: 100%; overflow-y: auto;background-color: #f3f3f3; box-shadow: 0 0 5px rgba(0,0,0,.3) ;}
.side .hd{ padding:30px 0 15px; color:#27c; text-shadow:0 2px 0 rgba(0,0,0,.2);}
.side .hd h2{ font-weight:lighter;}
.side .bd h4{ font-size:12px; color:#666;}
.side dl{ padding-bottom:10px;}
.side dl dt{ padding-bottom:10px;}
.side dl dd{ padding-bottom:5px;}
#url{ width:100%;}
#siteGroup{ width:100%; height:80px;}

/* 正文 */
.main{ margin-left:250px; padding: 50px; overflow:hidden;}
.site-list{margin:20px 15px;padding: 0; overflow:hidden;}
.site-list li{float:left; width:16.66%;font:normal 20px/400% Tahoma "微软雅黑";list-style:none;}
.site-list li a{display:block;margin:7px; padding:5px 10px; font-size:16px; line-height:30px; text-align:center;border:#ccc solid 1px;overflow:hidden; border-radius: 4px; transition:all 0.25s ease 0s; white-space: nowrap; text-overflow: ellipsis;}
.site-list li a:hover{background:#f8f6f1; border-color:#d9c086; box-shadow: 0 3px 6px rgba(0,0,0,.1) ;}
</style>
<div class="side">
    <div class="hd">
        <h1>集约化网站群</h1>
        <h2>站点功能批量检测工具</h2>
    </div>
    <div class="bd">
        <dl>
            <dt><h3>一、输入检测的网址</h3></dt>
            <dd><input type="text" name="fixfolder" id="url" size="30" placeholder="输入要检测的站点地址" title="例：http://www.luzhou.gov.cn"/></dd>
        </dl>
        <dl>
            <dt><h3>二、生成站点标识符</h3><h4>（子站点标识符无规则时可跳过）</h4></dt>
            <dd>标识前缀：<input type="text" name="prefix" id="prefix" size="4" value="ms"/></dd>
            <dd>开始序号：<input type="text" name="start" id="start" size="4" value="1"/></dd>
            <dd>结束序号：<input type="text" name="end" id="end" size="4" value="10"/></dd>
            <dd><button type="button" value ="生成站点" id="addSite">生成站点标识符</button></dd>
        </dl>
        <dl>
            <dt><h3>三、按标识符生成地址</h3><h4>（若跳过第二步此处需填写站点标识符）</h4></dt>
            <dd><textarea name="siteGroup" id="siteGroup" placeholder="生成站点标识符或手动填写站点标识符" title="自动生成站点标识符或手动填写站点标识符，标识符之间用英文逗号(,)隔开"></textarea></dd>
            <dd><button type="button" value ="生成地址" id="addUrl" onclick="addUrl()">生成地址</button> <button type="button" value ="打开地址" id="openUrl">浏览全部</button></dd>
        </dl>
    </div>
</div>
<div class="main">
    <h1>网站群站点检测地址导航</h1>
    <ul class="site-list"></ul>
</div>
<script type="text/javascript">
// 生成站点标识
$("#addSite").click(function(){
    var prefix = $("#prefix").val();
    var start = $("#start").val();
    var end = $("#end").val();
    var url = $("#url").val();
    var addSite = "" ;
    if( url=="" ){ alert("请输入要检测的站点地址") }
    else{
        for (var id=start;id<=end;id++) 
        { 
            if ( id < 10) {id = "0" + id;}
            if ( id <= 1) {
                addSite +=prefix + id;
            }
            else{
                addSite += "," + prefix + id;
            }
            $("#siteGroup").val(addSite);
        }
    }
});

// 绑定事件
document.getElementById("siteGroup").onkeydown = function (e) {
    e = e || window.event;
    if (e.keyCode == 13) {
        addUrl()
    }
};

// 批量生成站点链接
function addUrl() {
    var url = $("#url").val();
    var siteGroup =  $("#siteGroup").val();
    var sites = siteGroup.split(',');
    var addUrl = "" ;
    if( url=="" ){ alert("请输入要检测的站点地址") }
    else if ( siteGroup=="" ){ alert("站点标识符不能为空") }
    else{
        for (var id=0;id<sites.length;id++)
        {
        var siteName=sites[id];
        var href = $("#url").val().replace( url.split(".")[0].split("//")[1] , siteName);
        addUrl += "<li>" + "<a href='"+ href +"' target='_blank'>" + siteName + "</a>" + "</li>";
        $(".site-list").html(addUrl);
        }
    }
};

// 批量打开站点链接
$("#openUrl").click(function(){
    var url = $("#url").val();
    var siteGroup =  $("#siteGroup").val();
    var sites = siteGroup.split(',');
    var openUrl = "" ;
    if( url=="" ){ alert("请输入要检测的站点地址") }
    else if ( siteGroup=="" ){ alert("站点标识符不能为空") }
    else{
        for (var id=0;id<sites.length;id++)
        {
        var siteName=sites[id];
        var href = $("#url").val().replace( url.split(".")[0].split("//")[1] , siteName);
        openUrl += window.open(href);
        }
    }
});
</script>
</body>
</html>